// 二次封装axios(使用axios.create创建一个新的axios实例)
// 请求拦截器,响应拦截器
import axios from "axios";
import { ElMessage } from "element-plus";

const request = axios.create({
    baseURL: '/api', // 设置请求的基础路径(使所有请求都携带该路径)
    timeout: 5000    // 设置请求超时时间(5秒)
})

// 设置请求拦截器,该拦截器会在每次发出axios请求时执行回调函数
// 在该回调函数中返回一个config对象,axios将接收这个对象,并覆盖默认的请求配置
// 只要执行了'request.interceptors.request.use'就已经启动了这个"覆盖"的过程,如果不返回config,axios会无法处理请求
request.interceptors.request.use((config) => {
    // 可以通过config的headers属性,给所有请求都加上某些公共参数(比如token)
    return config
})

// 设置响应拦截器,它有两个回调函数,会在接收到响应或请求超时时执行对应回调函数
// 无论响应正确与否,组件接收到的数据都是它对应回调函数的返回值
request.interceptors.response.use(
    (response) => {
        // 一般用来简化数据
        return response.data;
    },
    // 该函数只在axios接收响应异常时执行,如果有响应(即使响应内是服务器返回的报错),就不执行
    (error) => {
        // 处理http网络错误信息
        let msg=''
        // http状态码
        let status=error.response.status
        // 对不同的错误状态码进行不同处理
        switch(status){
            case 201:
                msg='账号或密码错误'
                break
            case 401:
                msg='登陆token过期'
                break
            case 403:
                msg='访问被拒绝或无权访问'
                break
            case 404:
                msg='请求地址错误'
                break
            case 500:
                msg='服务器出现问题'
                break
            default:
                msg='网络异常'
                break
        }
        // 提示错误信息
        ElMessage.error(msg)            
        
        return Promise.reject(error)
    })

export default request

